<template>
	<div class="personal-info">
		<div class="edit-btn" v-if="editState == 0" @click="editState=1"><img src="@/assets/me/edit.png"><span>修改</span></div>
		<div class="personal-main flex" v-if="editState == 0">

			<div class="face-box">
				<img :src="form.headImg" v-if="form.headImg" class="face">
			</div>

			<div class="personal-content flex-item">
				<div class="title">
					<div class="name">{{form.name}}</div>
					<div class="phone"><img src="@/assets/me/phone.png"><span>{{form.phone}}</span></div>
					<div class="email"><img src="@/assets/me/email.png"><span>{{form.email}}</span></div>
				</div>
				<div class="content">
					<div class="content-item">
					性别：{{form.sex == 1?'男':'女'}}
					</div>
					<div class="content-item">
					出生日期：{{form.year}}
					</div>
					<div class="content-item">
					婚否：{{form.maritalStatus == 1?'已婚':'未婚'}}
					</div>
					<div class="content-item">
					身高：{{form.height}}cm
					</div>
					<div class="content-item">
						学历：{{form.highestEducationDesc}}
					</div>
					<div class="content-item">
					工作经验：{{form.workExperienceDesc}}
					</div>
					<div class="content-item">
					居住地：{{form.currentAddress}}
					</div>
					<div class="content-item">
					专业：{{form.major}}
					</div>
					<div class="content-item">
					籍贯：{{form.nativePlace}}
					</div>
					<div class="content-item">
					QQ号：{{form.qq}}
					</div>
					<div class="content-item">
					微信：{{form.wxNumber}}
					</div>
					<div class="content-item" v-if="form.taiwanCardNumber">
					台胞证号：{{form.taiwanCardNumber || '未填写'}}
					</div>
					<div class="content-item" v-else>
					身份证号： {{form.idCardNumber || '未填写'}}
					</div>
				</div>
			</div>
		</div>
		<div class="personal-edit" v-if="editState == 1">
			<div class="title">基本资料</div>
			<div class="content">
				<el-form ref="form" :model="form"  :rules="rules" label-width="85px" label-position="left" class="flex" hide-required-asterisk>
					<div class="edit-left flex-item">
						<div class="edit-item flex">
							<div class="red-dian"></div>
							<el-form-item label="姓名：" class="flex-item" prop="name">
								<el-input v-model="form.name" placeholder="请输入姓名"></el-input>
							</el-form-item>
						</div>
						<div class="edit-item flex">
							<div class="red-dian"></div>
							<el-form-item label="性别：" class="flex-item" prop="form.sex">
								<el-radio v-model="form.sex" :label="1">男</el-radio>
								<el-radio v-model="form.sex" :label="2">女</el-radio>
							</el-form-item>
						</div>
						<div class="edit-item flex">
							<div class="red-dian"></div>
							<el-form-item label="证件号码：" class="flex-item diy-select-input" prop="cardNumber">
								<el-input placeholder="请输入证件号码" v-model="cardNumber">
									<el-select v-model="form.isIdCard" slot="prepend" placeholder="请选择" class="ID-type">
										<el-option label="身份证" :value="2"></el-option>
										<el-option label="台胞证" :value="1"></el-option>
									</el-select>
								</el-input>
							</el-form-item>
						</div>
						<div class="edit-item flex">
							<div class="red-dian"></div>
							<el-form-item label="工作经验：" class="flex-item" prop="workExperience">
								<el-select v-model="form.workExperience" placeholder="请选择工作经验" class="select-input">
									<el-option :label="items.name" v-for="(items,index) in workSelect" :key="index" :value="items.code"></el-option>
								</el-select>
							</el-form-item>
						</div>
						<div class="edit-item flex">
							<div class="red-dian"></div>
							<el-form-item label="最高学历：" class="flex-item" prop="highestEducation">
								<el-select v-model="form.highestEducation" placeholder="请选择最高学历" class="select-input">
									<el-option v-for="(items,index) in educationSelect" :key="index" :label="items.name" :value="items.id"></el-option>
								</el-select>
							</el-form-item>
						</div>
						<div class="edit-item flex">
							<div class="red-dian"></div>
							<el-form-item label="手机号码：" class="flex-item diy-eidt-input">
								<el-input v-model="form.phone" placeholder="请输入手机号" maxlength="11"></el-input>
							</el-form-item>
						</div>
						<div class="edit-item flex">
							<div class="red-dian"></div>
							<el-form-item label="就业状况：" class="flex-item" prop="workStatus">
								<el-radio v-model="form.workStatus" :label="1">已就业</el-radio>
								<el-radio v-model="form.workStatus" :label="2">未就业</el-radio>
							</el-form-item>
						</div>
						<div class="edit-item flex">
							<div class="red-dian hide"></div>
							<el-form-item label="籍贯：" class="flex-item">
								<el-input v-model="form.nativePlace" placeholder="请输入籍贯"></el-input>
							</el-form-item>
						</div>
						<div class="edit-item flex">
							<div class="red-dian hide"></div>
							<el-form-item label="QQ号：" class="flex-item">
								<el-input v-model="form.qq" placeholder="请输入QQ号"></el-input>
							</el-form-item>
						</div>
					</div>
					<div class="edit-right flex-item">
						<div class="edit-item flex">
							<div class="red-dian hide"></div>
							<el-form-item label="头像：" class="flex-item">
								<el-upload
									action="#"
									class="avatar-uploader"
									:show-file-list="false" 
									:before-upload="beforeAvatarUpload"
									:http-request="uploadFaceFiles">
									<div class="face-img"><img :src="form.headImg || 'https://xmjob.oss-cn-hangzhou.aliyuncs.com/life/20201022/20201022111406.png'"></div>
								</el-upload>
							</el-form-item>
						</div>
						<div class="edit-item flex">
							<div class="red-dian"></div>
							<el-form-item label="出生年月：" class="flex-item" prop="year">
								<el-date-picker
								v-model="form.year"
								type="date"
								value-format="yyyy-MM-dd"
								placeholder="请选择出生年月" class="date-input">
								</el-date-picker>
							</el-form-item>
						</div>
						<div class="edit-item flex">
							<div class="red-dian hide"></div>
							<el-form-item label="现居住地：" class="flex-item">
								<el-input v-model="form.currentAddress" placeholder="请输入现居住地"></el-input>
							</el-form-item>
						</div>
						<div class="edit-item flex">
							<div class="red-dian hide"></div>
							<el-form-item label="所学专业：" class="flex-item">
								<el-input v-model="form.major" placeholder="请输入所学专业"></el-input>
							</el-form-item>
						</div>
						<div class="edit-item flex">
							<div class="red-dian"></div>
							<el-form-item label="邮箱地址：" class="flex-item"  prop="email">
								<el-input v-model="form.email" placeholder="请输入邮箱地址"></el-input>
							</el-form-item>
						</div>
						<div class="edit-item flex">
							<div class="red-dian hide"></div>
							<el-form-item label="身高：" placeholder="请输入身高" class="flex-item diy-label-input">
								<el-input v-model="form.height">
									<template slot="append">CM</template>
								</el-input>
							</el-form-item>
						</div>
						<div class="edit-item flex">
							<div class="red-dian hide"></div>
							<el-form-item label="婚姻状况：" class="flex-item">  								
								<el-radio v-model="form.maritalStatus" :label="1">已婚</el-radio>
								<el-radio v-model="form.maritalStatus" :label="2">未婚</el-radio>
							</el-form-item>
						</div>
						<div class="edit-item flex">
							<div class="red-dian hide"></div>
							<el-form-item label="微信号：" class="flex-item">
								<el-input v-model="form.wxNumber" placeholder="请输入微信号"></el-input>
							</el-form-item>
						</div>
					</div>
				</el-form>
				<div class="form-option">
					<div class="save qida-success-btn" @click="editResumeInfo">保存</div>
					<div class="cancel qida-cancel-btn" @click="editState=0">取消</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
import {updateResumeInfo} from '@/api/me/resume'
import {filesAnon,findBaseData} from '@/api/base'
export default {
	name:'personal-info',
	props:['resumeInfos'],
	data(){
		return {
			editState:0, //0:显示，1：编辑
			form:{
				"currentAddress": "",
				"email": "",
				"headImg": "",
				"height": 0,
				"highestEducation": '',
				"highestEducationDesc": "",
				"idCardNumber": "",
				"taiwanCardNumber": "",
				"isIdCard": 2,
				"major": "",
				"maritalStatus": '',
				"name": "",
				"nativePlace": "",
				"phone": "",
				"qq": "",
				"resumeId": this.$route.query.id,
				"sex": '',
				"workExperience": '',
				"workExperienceDesc": "",
				"workStatus": '',
				"wxNumber": "",
				"year": ""
			},
			cardNumber: '',
			rules: {
				name: [{ required: true, trigger: "blur", message: "姓名不能为空" }],
				idCardNumber: [{ required: true, trigger: "blur", message: "证件号码不能为空" }],
				workExperience: [{ required: true, trigger: "blur", message: "请选择工作经验" }],
				highestEducation: [{ required: true, trigger: "blur", message: "请选择学历" }],
				workStatus: [{ required: true, trigger: "blur", message: "请选择就业状况" }],
				birthday: [{ required: true, trigger: "blur", message: "请选择出生年月" }],
				email:[{ required: true, trigger: "blur", message: "邮箱地址不能为空" }],
				sex: [{ required: true, trigger: "blur", message: "请选择性别" }],
			},
			workSelect:[],
			educationSelect:[
				{name : "初中", id : '32'},
				{name : "高中", id : '33'},
				{name : "中技", id : '34'},
				{name : "中专", id : '35'},
				{name : "大专", id : '36'},
				{name : "本科", id : '37'},
				{name : "硕士", id : '38'},
				{name : "博士", id : '39'},
				{name : "博后", id : '40'}
			]
		}
	},
	watch:{
		resumeInfos(val){
			if(val.length>0){
				this.form = val[0];
				if(this.form.isIdCard == 2){
					this.cardNumber = this.form.idCardNumber;
					this.form.taiwanCardNumber = ''
				}else{
					this.cardNumber = this.form.taiwanCardNumber;
					this.form.idCardNumber = ''
				}
			}else{
				this.editState = 1;
			}
			this.form.resumeId=this.$route.query.id;
		}
	},
	created() {
		this.getWorkExperience();
	},
	methods: {
		editResumeInfo(){
			if(this.form.isIdCard == 2){
				this.form.idCardNumber = this.cardNumber;
				this.form.taiwanCardNumber = ''
			}else{
				this.form.taiwanCardNumber = this.cardNumber;
				this.form.idCardNumber = ''
			}
			this.$refs.form.validate(valid => {
				if (valid) {
					updateResumeInfo(this.form).then(res => {
						if(this.editState == 1){
							this.$message.success('保存成功');
						}else{
							vm.$message.success("修改成功");
						}
						this.editState=0;
					}).catch(err => {
						this.$message.error(err);
					})
				}
			})
		},
		editResumeFace(){
			updateResumeInfo(this.form).then(res => {
				vm.$message.success("修改成功");
			}).catch(err => {
				this.$message.error(err);
			})
		},

		beforeAvatarUpload(file){
			const isJPG = file.type === 'image/jpeg' ||  file.type === 'image/png';
			const isLt2M = file.size / 1024 / 1024 < 2;

			if (!isJPG) {
			this.$message.error('上传头像图片只能是 JPG 格式!');
			}
			if (!isLt2M) {
			this.$message.error('上传头像图片大小不能超过 2MB!');
			}
			return isJPG && isLt2M;
		},

		uploadFaceFiles(params){
			var vm = this;
			const file = params.file;

			// 根据后台需求数据格式
			const form = new FormData();
			// 文件对象
			form.append("file", file);
			// 项目封装的请求方法，下面做简单介绍
			filesAnon(form).then(res => {
				this.$set(vm.form,'headImg',res.url)
				// vm.editResumeFace()
			}).catch(res => {
				this.$message.error("上传失败，请重新上传");
			})
		},
		getWorkExperience(){
			var data={
				data:'workExperience'
			}
			findBaseData(data).then(res => {
				this.workSelect=res.datas[0].children;
			}).catch(err => {
				this.$message.error(err);
			})
		},
	}
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
	.personal-info{
		width: 100%;
		position: relative;
		.edit-btn{
			color: #3EABC4;
			position: absolute;
			right: 0;
			top: 0;
			cursor: pointer;
			img{
				vertical-align: middle;
				margin-top: -2px;
				margin-right: 3px;
			}
		}
		.personal-main{
			padding-bottom: 30px;
			.face-box{
				width: 100px;
				height: 100px;
				position: relative;
				cursor: pointer;
				background: url(../../../../assets/image/avatar.png) no-repeat;
				background-size: 100% 100%;
				.face{
					display: block;
					width: 100%;
					height: 100%;
				}
				.face-text{
					text-align: center;
					color: #fff;
					position: absolute;
					bottom: 0;
					left: 0;
					right: 0;
					height: 21px;
					line-height: 21px;
					font-size: 12px;
					background-color: rgba(0,0,0,0.3);
				}
			}
			.personal-content{
				margin-left: 23px;
				color: #787878;
				.title{
					overflow: hidden;
					height: 28px;
					line-height: 28px;
					color: #121212;
					font-weight: 400;
					.name{
						font-size: 26px;
						float: left;
					}
					.phone{
						float: left;
						margin-left: 25px;
						img{
							vertical-align: middle;
							margin-top: -3px;
						}
					}
					.email{
						float: left;
						margin-left:50px;
						img{
							vertical-align: middle;
							margin-top: -2px;
							margin-right: 3px;
						}
					}
				}
				.content{
					overflow: hidden;
					margin-top: 10px;
					.content-item{
						float: left;
						width: 250px;
						line-height: 30px;
						padding-right: 10px;
					}
				}
			}
		}
		.personal-edit{
			.title{
				font-size: 16px;
				font-weight: bold;
				color: #3EABC4;
				border-left:4px solid #3EABC4;
				text-indent: 10px;
			}
			.content{
				margin-top: 25px;
				padding-bottom: 40px;
				.edit-left{
					padding-right: 80px;
					
				}
				.edit-right{
					padding-right: 40px;
					
				}
				.edit-item{
					.diy-select-input{
						.el-select{
							.el-input{
								width: 100px;
								border-right:0px;
							}
							.el-input__inner{
								border-right: 0px;
								padding-left: 5px;
								padding-right: 20px;
								text-align: center;
							}
						}
						.el-input__inner{
							border-left: 0px;
						}
						
						.el-input-group__prepend{
							border-radius: 0;
							background-color: #fff;
							-webkit-transition: all 0.2s ease-in;
							-moz-transition: all 0.2s ease-in;
							-o-transition: all 0.2s ease-in;
							-ms-transition: all 0.2s ease-in;
							transition: all 0.2s ease-in;
						}
						.el-input__icon{
							width: 15px;
						}
					}
					.diy-select-input.is-error{
						.el-input-group__append{
							border-color: #ff4949 !important;
						}
						.el-input-group__prepend{
							border-color: #ff4949 !important;
						}
						
					}
					.diy-select-input.is-error:hover{
						.el-input-group__prepend{
							border-color: #DCDFE6 !important;
						}
						.el-input__inner{
							border-color: #DCDFE6 !important;
						}
					}
					.diy-eidt-input{
						.el-input__inner{
							border-right: 0px;
						}
						
						.el-input-group__append{
							border-radius: 0;
							background-color: #fff;
							color: #3EABC4;
							padding: 0 15px;
							cursor: pointer;
						}
					}
					.diy-label-input{
						.el-input__inner{
							border-right: 0px;
						}
						
						.el-input-group__append{
							border-radius: 0;
							background-color: #fff;
							color: #333;
							font-weight: 400;
							padding: 0 15px;
							cursor: pointer;
						}
					}
					.el-form-item{
						margin-bottom: 20px;
						.el-form-item__label{
							font-weight: normal;
							color: #777777;
						}
						.el-input__inner{
							border-radius: 0px;
						}
						.select-input{
							width: 100%;
						}
						.date-input{
							width: 100%;
						}
						.avatar-uploader{
							display: block;
							width: 92px;
							height: 92px;
						}
					}
					.red-dian{
						width: 5px;
						height: 5px;
						border-radius: 2.5px;
						background-color: #d92032;
						margin-right: 5px;
						margin-top: 16px;
					}
					.red-dian.hide{
						opacity: 0;
					}
					.face-img{ 
						width: 92px;
						height: 92px;
						border:1px solid #ccc;
						img{
							border: none;
							width: 86px;
							height: 86px;
							margin-left: auto;
							margin-right: auto;
							margin-top: 2px;
							display: block;
						}
					}
				}
				.form-option{
					margin-top: 10px;
					padding-left: 10px;
					.save{
						margin-right: 15px;
					}
					
				}
			}
		}
		.ID-type{
			width: 90px;
			border: 0;
		}
	}
</style>
